<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FOMO</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
    <style>
        body{
            background-image: url("./img/bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .container-box{
          height: 616px;
        }
        .container{
            width: 100%;
            padding: 0 6px 0 7px;
        }
        .title-box{
            overflow: hidden;
            height: 180px ;
        }
        .title-img{
            width: 130%;
            position: relative;
            top:-80px;
            left:-100px;
        }
        .qstion-box{
            width: 363px;
            height: 190px;
            background-image: url("./img/question-dialog.png");
            background-size: 100% 100%;
            padding: 28px 9px 1px 13px;
            margin: 0px auto;
            display: table;
        }
        .question-content{
            display: table-cell;
            vertical-align:middle;
           text-align: left;
            margin: 0px auto;
            font-family: LLPixel;
            font-size: 18px;
            color: #3A3A3A;
            letter-spacing: 0.36px;
            line-height: 38px;
        }
        .question-btn{
            margin-top: 40px;
            padding: 0 30px 0 30px;
        }
        .yes-btn{
            font-family: HighPixel-7;
            font-size: 20px;
            color: #FFCA02;
            display: inline-block;
        }
        .no-btn{
            font-family: HighPixel-7;
            font-size: 20px;
            color: #00A0FA;
            float: right;
        }
        .sometimes-box{
            margin-top: 20px;
           text-align: center;
        }
        .qstin-left{
            margin-top: 10px;
            margin-left: -80px;
        }
        .bottom-box{
            height: 196px;
        }
    </style>
</head>
<body>
    <div class="container-box">
      <div class="title-box">
        <img src="./img/question-top.png" class="title-img">
      </div>

      <div class="container">
        <div class="qstion-box">
          <div class="question-content">
            1. Do you wake up first thing in the morning and
            turn on your cell phone to see if there are any
            unread messages before you get up?
          </div>
        </div>

        <div class="question-btn">
          <img src="./img/yes.png" class="yes-btn" onclick="answerFn(1)">
          <img src="./img/no.png" class="no-btn" onclick="answerFn(2)">
        </div>

        <div class="sometimes-box">
          <img src="./img/sometimes.png" class="sometimes-btn" onclick="answerFn(3)">
        </div>
        <img src="./img/question-left.png" class="qstin-left">
      </div>
    </div>

    <div class="bottom-box"></div>


    <script src="./plugins/jQuery/jquery.min.js"> </script>
    <script src="./plugins/bootstrap/js/bootstrap.min.js"> </script>
    <script>
        var questions = [
          '1. Do you wake up first thing in the morning and turn on your cell phone to see if there are any unread messages before you get up?',
          '2.Do you catch up with social media at meal time, in the bathroom, while watching television?',
          '3.When you go offline while traveling around the city ,do you feel stressed and rush to get connected?',
          '4.Do you use your phone before sleeping, and leave the device close by so it can be checked as soon as you wake?',
          '5.Do you feel others are having a more exciting time than you are?',
          '6.Are you concerned when you friends seem to be having more fun without you?',
          '7.Do you feel you can not follow the latest group jokes amongst your friendship group?',
          '8.When you go on holiday, are you continuously checking what you friends are up to?',
          '9.Do you open social media and browse the latest posts from start to finish?',
          '10.Do you will open Weibo, check today\'s hot, comment on topics of interest, and simultaneously browse the Weibo feed stream to the last time you scanned?',
          '11.Do you have the habit of checking information regularly when you log in to social software?',
          '12.When friends get together without you - are you glad when they send a group photo to social media?',
          '13.Do you feel anxious in a crowd?',
          '14.Do you make eye contact with people when you talk with them?'
        ];
        var answer = [];//store the answer
        var currentNum = 1;//current question num
        function answerFn(answerId) {

            answer.push(answerId);
            if(currentNum < questions.length && currentNum > 0){
                if(currentNum == 9){//change the font size
                  $('.question-content').css('font-size','14px');
                }else{
                  $('.question-content').css('font-size','18px');
                }
                $('.question-content').text(questions[currentNum]);

                if(currentNum == questions.length - 1){//the last question
                    setTimeout(forwardToResult,1000);
                }

                currentNum++;
            }
        }

        //calculate the score
        function forwardToResult() {
          var score = 0;
          for(var i = 0; i < answer.length ; i++){

            if(answer[i] == 1){//choose A
              score += 3;
            }else if(answer[i] == 2){//choose B
              score += 1;
            }else if(answer[i] == 3){//choose C
              score += 2;
            }
          }
          window.location.href = "./calculate.html?score="+score;
        }
    </script>
</body>
</html>
